<template>
	<!-- 20230510 -->
	<view class="mall-my-browse-list-page">

		<!-- 页面内容 -->
		<view class="page-content padding-bottom-safe-footer-20">
			
			<!-- 导航条 -->
			<view class="jc-header bg-ff" v-if="isLoadFinish && list.length">
				<view class="line-height-header padding-lr-30 flex align-center justify-between">
					<view class="text-26 text-4d">为您展示最近30天浏览的商品</view>
					<view>
						<text class="text-30 text-main" v-if="!isEdit" @click="delAll">清空</text>
						<text class="margin-left-40 text-30 text-main" @click="isEdit = !isEdit">{{isEdit ? '完成' : '编辑'}}</text>
					</view>
				</view>
			</view>

			<!-- 浏览记录列表 -->
			<view class="margin-top-title-header" v-if="isLoadFinish && list.length">
				<ty-list-list :status="loadStatus">
					<view class="margin-lr-30">
						<view v-for="(item,index) in list" :key="index">
							<!-- 日期 -->
							<view class="padding-top-40 line-50 text-36 text-bold" v-if="item.is_show_date == 1">
								{{item.browse_date_text}}
							</view>

							<!-- 商品 -->
							<view class="margin-tb-20 radius-10 padding-20 bg-ff flex align-center">
								<!-- 选中图标 -->
								<view class="choose-btn margin-right-10 text-center" @click.stop="choose(index)" v-if="isEdit">
									<text class="text-40"
										:class="item.is_select == 0 ? 'tyIcon-round text-cc' : 'tyIcon-round-check text-main'">
									</text>
								</view>

								<view class="flex-one flex align-center"
									@click="go('/pages/mall/detail?id='+item.product_id)">
									<!-- 图片 -->
									<image class="jc-image-180 radius-10" :src="item.product_cover_img"
										mode="aspectFill">
									</image>
									<!-- 产品信息 -->
									<view class="margin-left-20 flex-one">
										<!-- 名称 -->
										<view class="line-40 height-80 text-cut-two text-28">
											{{item.product_name}}
										</view>
										<view class="margin-top-60 text-30 text-main">
											¥{{item.product_price}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</ty-list-list>
			</view>
			
			<!-- 空 -->
			<view v-if="isLoadFinish && !list.length">
				<ty-text-no-data text="您还没有浏览过商品哦" @btnClick="go('/pages/mall/index',3)">
				</ty-text-no-data>
			</view>

			<!-- 底部条 -->
			<view class="jc-footer-safe bg-ff">
				<view class="line-height-footer padding-lr-30 flex align-center justify-between"
					v-if="isEdit">
					<!-- 全选按钮 -->
					<view class="flex align-center">
						<!-- 全选图标 -->
						<text class="text-40"
							:class="isAllChoose ? 'tyIcon-round-check text-main' : 'tyIcon-round text-cc'"
							@click="chooseAll"></text>
						<view class="margin-left-5 line-40 text-28">全选</view>
					</view>
					
					<!-- 删除按钮 -->
					<view class="width-220 line-height-75 bg-main text-center text-30 text-ff"
						style="border-radius: 38rpx;" @click="del">
						删除
					</view>
				</view>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">

		</view>
	</view>
</template>

<script>
	import mall from "../api/mall.js"
	export default {
		data() {
			return {
				// 是否编辑模式
				isEdit: false,
				// 是否全选
				isAllChoose: false,
				// 列表状态
				loadStatus: '',
				// 列表
				list: [],
				// 是否加载完成
				isLoadFinish: false,
			}
		},

		onReady() {
			this.loadList(1)
		},

		onReachBottom() {
			this.loadList(0)
		},

		methods: {
			/**
			 * 获取我的浏览记录
			 * @param {Object} isFirstPage
			 * @date 2022-11-30
			 */
			loadList(isFirstPage) {
				mall.listMyBrowse(this, isFirstPage).then(res => {
					let list = this.list
					this.isLoadFinish = true

					list.forEach((value, key) => {
						// 最后10条记录更新is_show_date字段
						if (key >= list.length - 10) {
							if (key == 0) {
								value.is_show_date = 1
							} else {
								if (value.browse_date != list[key - 1].browse_date) {
									value.is_show_date = 1
								}
							}
							if (this.isAllChoose) {
								value.is_select = 1
							}
						}
					})
					this.list = list
				})
			},

			/**
			 * 选择商品
			 * @param {Object} index
			 * @date 2022-11-30
			 */
			choose(index) {
				this.list[index].is_select = this.list[index].is_select == 1 ? 0 : 1

				this.loadBottom()
			},

			/**
			 * 全选商品
			 * @date 2022-11-30
			 */
			chooseAll() {
				this.isAllChoose = !this.isAllChoose

				let choose = this.isAllChoose ? 1 : 0
				this.list.forEach(value => {
					value.is_select = choose
				})
			},

			/**
			 * 重新加载底部栏
			 * @date 2022-11-30
			 */
			loadBottom() {
				let allChoose = true
				this.list.forEach(value => {
					if (value.is_select == 0) {
						allChoose = false
					}
				})
				this.isAllChoose = allChoose
			},

			/**
			 * 删除选中浏览记录
			 * @date 2022-12-01
			 */
			del() {
				let browseIds = []
				this.list.forEach(value => {
					if (value.is_select == 1) {
						browseIds.push(value.id)
					}
				})
				if (!browseIds.length) {
					this.cn.toast('请选择要删除的浏览记录~')
					return false
				}

				mall.deleteMyBrowse(browseIds).then(res => {
					if (res.code == 0) {
						this.cn.toast(res.msg)
						this.isEdit = false
						this.loadList(1)
					}
				})
			},

			/**
			 * 删除全部浏览记录
			 * @date 2022-12-01
			 */
			delAll() {
				this.cn.confirm('您是否确认清空所有浏览记录').then(res => {
					if (res.confirm) {
						mall.deleteAllMyBrowse().then(res => {
							if (res.code == 0) {
								this.cn.toast(res.msg)
								this.isEdit = false
								this.loadList(1)
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	/* 选择按钮 */
	.choose-btn {
		width: 40rpx;
	}
</style>
